<template>
    <div class='container'>
        <div style='display: flex'>
            <el-input type='textarea' v-model='news.title' placeholder='标题' class='title'></el-input>
        </div>
        <div style='margin-bottom: 10px'>
            <el-upload
                :action='fileUrl'
                list-type='picture-card'
                :on-success='handleSuccess'
                :limit='1'
                :file-list="fileList"
                :on-preview='handlePictureCardPreview'
                :on-remove='handleRemove'>
                <i class='el-icon-plus'></i>
            </el-upload>
            <el-dialog :visible.sync='dialogVisible'>
                <img width='100%' :src='dialogImageUrl' alt=''>
            </el-dialog>
        </div>
        <NewsEditor ref="childRef" @saveHtml='save'></NewsEditor>

    </div>
</template>

<script>
import apis from '@/api/apis';
import NewsEditor from '@/components/common/NewsEditor';
import constVal from '@/api/const';

export default {
    components: {
        NewsEditor
    },
    created() {
        this.fileUrl = constVal.FileUploadInterface();
        this.init(this.$route.query.id)
    },
    data() {
        return {
            fileUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            fileList:[],
            news: {
                cover: '',
                title: ''
            }
        };
    },
    methods: {
        init(id) {
            this.news.id = id==="undefined"?undefined:id;
            this.$nextTick(() => {
                if (this.news.id) {
                    apis.getNewsById(this.news.id).then(data => {
                        if (data && data.code === 0) {
                            this.news.cover = data.news.cover;
                            this.news.title = data.news.title;
                            this.fileList.push({url: this.news.cover})
                            this.$refs.childRef.setHtml(data.news.content);
                        }
                    });
                }
            });
        },
        save(html) {
            if(html===''){
                this.$message.error("正文不能为空")
                return
            }
            if(this.news.cover===''){
                this.$message.error("封面图不能为空")
                return
            }
            if(this.news.title===''){
                this.$message.error("标题不能为空")
                return
            }
            this.news.content = html;
            apis.saveNews(this.news).then(res=>{
                if (res && res.code === 0) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                    });
                    this.news = {
                        cover: '',
                        title: ''
                    }
                    //清除文件列表
                    this.fileList = []
                    //清除富文本的内容
                    this.$refs.childRef.setHtml("");
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(res, file) {
            this.news.cover = res.url;
        }
    }
};
</script>
<style scoped>
.title {
    margin-bottom: 10px;
}

</style>
